<template>
	<div class="padding20">
		<el-row style="margin-bottom: 17px">
			<el-form :inline="true" :model="queryForm">
				<el-form-item>
					<fortress-select v-model="queryForm.platform" :dictList="ossTypeList" autocomplete="off" placeholder="请输入平台类型" clearable></fortress-select>
				</el-form-item>
				<el-form-item>
					<el-input prefix-icon="el-icon-search" v-model="queryForm.ftCode" autocomplete="off" placeholder="请输入存储编码" clearable></el-input>
				</el-form-item>
				<el-form-item v-show="collapse.flag">
					<el-select v-model="queryForm.status" placeholder="请选择状态" clearable>
						<el-option label="启用" value="1"></el-option>
						<el-option label="未启用" value="2"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" size="medium" icon="el-icon-search" @click="queryList({ current: 1 })">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" icon="el-icon-refresh-left" @click="resetQueryForm">重置</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="text" @click="handleCollapseState">
						{{ collapse.label }}
						<i :class="collapse.icon"></i>
					</el-button>
				</el-form-item>
			</el-form>
			<el-button type="primary" size="medium" v-if="$tools.hasPermission('system:configOss:save')" @click="handleEdit()" icon="el-icon-plus">添加</el-button>
		</el-row>
		<loading :show="parentShow">
			<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border>
				<el-table-column type="selection" width="55" show-overflow-tooltip></el-table-column>
				<el-table-column prop="platform" label="类型" :formatter="platformFmt" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="ftCode" label="存储编码" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="status" label="状态" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<el-tag type="success" size="mini" v-if="scope.row.status == 1">已启用</el-tag>
						<el-tag type="danger" size="mini" v-else>未启用</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="操作" fixed="right" min-width="180">
					<template slot-scope="scope">
						<el-button v-if="$tools.hasPermission('system:configOss:info')" size="mini" @click="handleInfo(scope.row.id)">详情</el-button>
						<el-button v-if="$tools.hasPermission('system:configOss:edit')" size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
						<el-button v-if="$tools.hasPermission('system:configOss:delete')" size="mini" type="danger" @click="handleDelete(scope.row)" plain>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</loading>
		<pagination :total="page.total" :current-page="page.current" :page-size="page.size" @refreshData="queryList"></pagination>
		<form-edit v-if="formEditVisible" ref="formEdit" :platformList="ossTypeList" @refreshData="queryList"></form-edit>
		<form-info v-if="formInfoVisible" ref="formInfo"></form-info>
	</div>
</template>
s
<script>
import { configOssPage, configOssDel } from "@/api/system/configoss.js"
import { enumList } from "@/api/public.api.js"
import FormEdit from "./configoss-edit"
import FormInfo from "./configoss-info"
import FortressPagination from "@/components/fortress-pagination.vue"
export default {
	data() {
		return {
			parentShow: "",
			tableData: [],
			formEditVisible: false,
			formInfoVisible: false,
			ossTypeList: [],
			queryForm: {
				platform: "",
				ftCode: "",
				status: "",
			},
			page: {
				current: 1,
				size: 10,
				total: 0,
			},
			collapse: {
				icon: "el-icon-arrow-down el-icon--right",
				label: "展开",
				flag: false,
			},
		}
	},
	components: {
		"form-edit": FormEdit,
		pagination: FortressPagination,
		FormInfo,
	},
	created() {
		this.queryOssTypeList()
		this.tableData = []
		this.queryList()
	},
	methods: {
		//切换查询条件收缩框
		handleCollapseState() {
			this.collapse.flag = !this.collapse.flag
			if (this.collapse.flag) {
				this.collapse.icon = "el-icon-arrow-up el-icon--right"
				this.collapse.label = "收起"
			} else {
				this.collapse.icon = "el-icon-arrow-down el-icon--right"
				this.collapse.label = "展开"
			}
		},
		//查询文件存储配置类型
		queryOssTypeList() {
			enumList("Oss").then(resp => {
				if (resp.code == 0) {
					this.ossTypeList = resp.data
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
		//查询文件存储列表
		queryList(page) {
			this.parentShow = true
			if (page) {
				this.page.current = page.current ? page.current : this.page.current
				this.page.size = page.size ? page.size : this.page.size
			}
			this.queryForm.current = this.page.current
			this.queryForm.size = this.page.size
			configOssPage(this.queryForm).then(resp => {
				if (resp.code == 0) {
					setTimeout(() => {
						this.parentShow = false
						this.tableData = resp.data.records
						this.page.total = resp.data.total
						//查询页大于总页数，重新查询
						let cu = this.page.total % this.page.size == 0 ? parseInt(this.page.total / this.page.size) : parseInt(this.page.total / this.page.size + 1)
						if (cu > 0 && this.page.current > cu) {
							this.queryList({ current: cu })
						}
					}, 600)
				} else {
					this.parentShow = false

					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
		// 存储平台类型格式化
		platformFmt(row) {
			let typeName = ""
			this.ossTypeList.forEach(item => {
				if (row.platform == item.code) {
					typeName = item.name
				}
			})
			return typeName
		},
		//状态格式化返回
		statusFmt(row) {
			let typeName = "未启用"
			if (row.status == 1) {
				typeName = "已启用"
			}
			return typeName
		},
		//打开编辑窗口
		handleEdit(id) {
			this.formEditVisible = true
			this.$nextTick(() => {
				this.$refs.formEdit.init(id)
			})
		},

		//删除
		handleDelete(row) {
			configOssDel(row.id).then(resp => {
				if (resp.code == 0) {
					this.$message({
						type: "success",
						message: "操作成功!",
					})
					//判断是否最后一页的最后一条记录
					let totalPages = (this.page.total - 1) % this.page.size == 0 ? (this.page.total - 1) / this.page.size : (this.page.total - 1) / this.page.size + 1
					if (this.page.current > totalPages && this.page.current != 1) {
						this.page.current = this.page.current - 1
					}
					this.queryList()
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
		//查看详情
		handleInfo(id) {
			this.formInfoVisible = true
			this.$nextTick(() => {
				this.$refs.formInfo.init(id)
			})
		},
		//重置查询框
		resetQueryForm() {
			this.queryForm = {
				platform: "",
				ftCode: "",
				status: "",
			}
			this.queryList({ current: 1 })
		},
	},
}
</script>
<style scoped></style>
